<template>
  <div class="artcate">
    <div class="head">
      <el-button type="primary" @click="addRoot(0,0)">新增一级分类</el-button>
      <el-button type="text"
        style="color:red;"
        @click="dels()">
        批量删除
      </el-button>
    </div>
    <el-tree 
    :data="treeData"
    show-checkbox
    node-key="id"
    ref="tree"
    default-expand-all
    :expand-on-click-node="false">
    <!-- :props="defaultProps"  -->
    <div class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ data.name }}--{{ data.alias }}</span>
        <span>
          <el-button
            type="text"
            v-if="data.pid==0"
            @click="addRoot(data.id)"
            style="color:green;"
            size="mini">新增分类</el-button>
          <el-button
            type="text"
            size="mini"
            @click="() => rename(node, data)">
            重命名
          </el-button>
          <el-button
            type="text"
            style="color:red;"
            v-if="data.pid!=0"
            size="mini"
            @click="() => del(node, data)">
            删除
          </el-button>

        </span>
      </div>
     </el-tree>
        <!-- 重命名的弹出框 -->
    <el-dialog
      title="更改文件夹名称"
      :visible.sync="changeDirNamedialogVisible"
      width="30%"
      :before-close="handleClosechangeDirNamedialog">
      <div><label for="dirName">文件夹原名称：</label>{{beforeName}}</div>
      <label for="dirName">文件夹名称：</label><el-input id="dirName" v-model="dirName"></el-input>
      <div><label for="beforeAlias">文件夹原别名：</label>{{beforeAlias}}</div>
      <label for="beforeAlias">文件夹别名：</label><el-input id="dirName" v-model="AliasName"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="changeDirNamedialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmDirName">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 重命名的弹出框 -->
    <!-- 新增一级分类的弹出框 -->
    <el-dialog
      :title="Level?'新增二级分类':'新增一级分类'"
      :visible.sync="firstDirNamedialogVisible"
      width="30%"
      :before-close="handleClosefirstDirNamedialog">
      <label for="newdirName">文件夹名称：</label><el-input id="newdirName" v-model="newDirName"></el-input>
      <label for="newbeforeAlias">文件夹别名：</label><el-input id="newdirName" v-model="newAliasName"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="firstDirNamedialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmDirName">确 定</el-button>
      </span>
    </el-dialog>
  </div>
  
</template>

<script>
import {getArtcateCates,updatecate,addCate,delOneCate,delArrCate} from "@/api/artcate"
export default {
  data(){
    return {
      treeData:[],
      changeDirNamedialogVisible:false,
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      dirName:"",
      AliasName:"",
      beforeName:"",
      beforeAlias:"",
      changeId:-1,
      firstDirNamedialogVisible:false,
      newDirName:"",
      newAliasName:"",
      Level:-1,
      addFaId:-1,
    }
  },
  methods:{
      async ArtcateCates(){
        this.treeData = []
        let {data} = await  getArtcateCates();
        var NoNull = [];
        for (let index = 0; index < data.length; index++) {
          const element = data[index];
          for (let jndex = 0; jndex < element.children.length; jndex++) {
              var obj =  element.children[jndex];
              delete obj.children;
              element.children[jndex] =obj;
          }
          NoNull.push(element)
        }
        this.treeData = NoNull;
      },
      handleNodeClick(data){
        console.log(data);
      },
      handleClosechangeDirNamedialog(){
        this.changeDirNamedialogVisible = false;
        this.dirName=null;
        this.beforeName=null;
      },
      rename(node, data){
        this.beforeName = data.name;
        this.beforeAlias = data.alias;
        this.changeId = data.id;
        this.changeDirNamedialogVisible = true
      },
      /**
       * 确定更改文件名称
       */
      confirmDirName(){
        var id = this.changeId;
        var name = this.dirName;
        var alias = this.AliasName;
        var obj ={
          id,
          name,
          alias
        }
        updatecate(obj).then(res=>{
          this.ArtcateCates()
        })
        this.changeDirNamedialogVisible = false;
        this.dirName=null;
        this.AliasName=null;
        this.beforeName=null;
        this.changeId = -1;
      },
      del(node, data){
        delOneCate(data.id).then(res=>{
          console.log(res);
          this.ArtcateCates()
        })
      },
      dels(){
        var arr = this.$refs.tree.getCheckedKeys();
        console.log(arr);
        var formData = new FormData(); // 当前为空
        var arrStr = JSON.stringify(arr)
        formData.append('delArr', arrStr);
        delArrCate(formData).then(res=>{
          this.ArtcateCates()
        })
      },
      addRoot(Level){
        this.Level = Level;
        this.firstDirNamedialogVisible = true;
      },
      handleClosefirstDirNamedialog(){
        this.newAliasName = null;
        this.newDirName = null;
        this.firstDirNamedialogVisible = false;
      },
      confirmDirName(){
        var newAliasName = this.newAliasName;
        var newDirName = this.newDirName;
        var Level = this.Level;
        var obj ={
          pid:Level,
          alias:newAliasName,
          name:newDirName
        }
        addCate(obj).then(res=>{
          setTimeout(() => {
            this.Level = -1;
            this.ArtcateCates()
          }, 1000);
        })
        this.newAliasName = null;
        this.newDirName = null;
        this.firstDirNamedialogVisible = false;
      }
  },
  created(){
      this.ArtcateCates();
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.custom-tree-node{
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.artcate{
  margin: 20px;
  .head{
    display: flex;
    justify-content: space-between;
  }
}
</style>
